<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: calc(100% - 55px);overflow: auto;padding-bottom: 53px;">
    <template slot="title">
      <div style="width: 100%;">
        <span>{{ title }}</span>
        <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
          <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
        </span>
      </div>
    </template>
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
          <a-form-item label="批准文号" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-decorator="[ 'yid', validatorRules.yid]" placeholder="请输入批准文号"></a-input>
          </a-form-item>
          <a-form-item label="药品名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-decorator="[ 'yname', validatorRules.yname]" placeholder="请输入药品名称"></a-input>
          </a-form-item>
          <a-form-item label="出货数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input-number v-decorator="[ 'numbers', validatorRules.numbers]" placeholder="请输入出货数量" style="width: 100%"/>
          </a-form-item>
          <a-form-item label="销售单价" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input-number v-decorator="[ 'sprice', validatorRules.sprice]" placeholder="请输入销售单价" style="width: 100%"/>
          </a-form-item>
          <a-form-item label="总金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-decorator="[ 'money', validatorRules.money]" placeholder="请输入总金额"></a-input>
          </a-form-item>
          <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input v-decorator="[ 'remarks', validatorRules.jyremarks]" placeholder="请输入备注"></a-input>
          </a-form-item>
      </a-form>
    </a-spin>
    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleOk" type="primary" :loading="confirmLoading">提交</a-button>
    </div>
  </a-drawer>
</template>

<script>
  import pick from 'lodash.pick'
  import { httpAction } from '@/api/manage'

  export default {
    name: "MedicineSellModal",
    components: {
    },
    data () {
        return {
            form: this.$form.createForm(this),
            title:"操作",
            modalWidth:800,
            drawerWidth:700,
            modaltoggleFlag:true,
            disableSubmit:false,
            visible: false,
            model: {},
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },

            confirmLoading: false,
            validatorRules:{
                yid:{rules: [{ required: true, message: '请输入药品编号!' }]},
                yname:{rules: [{ required: true, message: '请输入药品名称!' }]},
                numbers:{rules: [{ required: true, message: '请输入出货数量!' }]},
                sprice:{rules: [{ required: true, message: '请输入销售单价!' }]},
                money:{rules: [{ required: true, message: '请输入总金额!' }]},
                remarks:{},
            },
            url: {
                add: "/medicine/medicineSell/add",
                edit: "/medicine/medicineSell/edit",
            },
            data: [],
        }
    },
    created () {
    },
      methods: {
          add () {
              this.edit({});
          },
          edit (record) {
              this.form.resetFields();
              this.model = Object.assign({}, record);
              this.visible = true;
              this.$nextTick(() => {
                  this.form.setFieldsValue(pick(this.model,'yid','yname','numbers','sprice','money','remarks'))
              })
          },
          close () {
              this.$emit('close');
              this.visible = false;
          },
          handleOk () {
              const that = this;
              // 触发表单验证
              this.form.validateFields((err, values) => {
                  if (!err) {
                      that.confirmLoading = true;
                      let httpurl = '';
                      let method = '';
                      if(!this.model.sid){
                          httpurl+=this.url.add;
                          method = 'post';
                      }else{
                          httpurl+=this.url.edit;
                          method = 'put';
                      }
                      let formData = Object.assign(this.model, values);
                      console.log("表单提交数据",formData)
                      httpAction(httpurl,formData,method).then((res)=>{
                          if(res.success){
                              that.$message.success(res.message);
                              that.$emit('ok');
                          }else{
                              that.$message.warning(res.message);
                          }
                      }).finally(() => {
                          that.confirmLoading = false;
                          that.close();
                      })
                  }

              })
          },
          handleCancel () {
              this.close()
          },
          popupCallback(row){
              this.form.setFieldsValue(pick(row,'yid','yname','numbers','sprice','money','remarks'))
          },
          //窗口最大化切换
          toggleScreen(){
              if(this.modaltoggleFlag){
                  this.modalWidth = window.innerWidth;
              }else{
                  this.modalWidth = 800;
              }
              this.modaltoggleFlag = !this.modaltoggleFlag;
          },
      }
  }
</script>

<style scoped>
  .avatar-uploader > .ant-upload {
    width:104px;
    height:104px;
  }
  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .ant-table-tbody .ant-table-row td{
    padding-top:10px;
    padding-bottom:10px;
  }

  .drawer-bootom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>